<template>
  <el-popover
    placement="bottom-start"
    width="646"
    v-model="visible"
    trigger="click">
    <div class="el-picker-panel__body-wrapper">
      <div class="el-picker-panel__body" style="display: flex;">
        <div class="el-picker-panel__content el-date-range-picker__content is-left">
          <div class="el-date-range-picker__header">
            <button type="button" class="el-picker-panel__icon-btn el-icon-d-arrow-left" @click="prev"></button>
            <div>{{year}} 年</div>
          </div>
          <table class="el-month-table">
            <tbody>
              <tr>
                <template v-for="val in list">
                  <td :class="{'today': val.today, 'disabled': val.disabled, 'start-date': (val.startDate <= currValue[0] && val.endDate >= currValue[0]), 'in-range': (val.startDate >= currValue[0] && val.endDate <= currValue[1]), 'end-date': (val.startDate <= currValue[1] && val.endDate >= currValue[1])}" :key="val">
                    <div><a class="cell" @click="clickItem(val)" @mousemove="focusItem(val)">{{val.name}}</a></div>
                  </td>
                </template>
                <!-- <td class="in-range start-date"><div><a class="cell">二季度</a></div></td> -->
              </tr>
            </tbody>
          </table>
        </div>
        <div class="el-picker-panel__content el-date-range-picker__content is-right">
          <div class="el-date-range-picker__header">
            <button type="button" class="el-picker-panel__icon-btn el-icon-d-arrow-right" @click="next"></button>
            <div>{{year + 1}} 年</div>
          </div>
          <table class="el-month-table">
            <tbody>
              <tr>
                <template v-for="val in nextList">
                  <td :class="{'today': val.today, 'disabled': val.disabled, 'start-date': (val.startDate <= currValue[0] && val.endDate >= currValue[0]), 'in-range': (val.startDate >= currValue[0] && val.endDate <= currValue[1]), 'end-date': (val.startDate <= currValue[1] && val.endDate >= currValue[1])}" :key="val">
                    <div><a class="cell" @click="clickItem(val)" @mousemove="focusItem(val)">{{val.name}}</a></div>
                  </td>
                </template>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
    <div slot="reference">
      <el-input :value="valueText" :placeholder="placeholder" clearable @clear="handleClear"></el-input>
    </div>
  </el-popover>
</template>
<script>
export default {
  props: {
    value: {
      type: Array,
      default() {
        return []
      }
    },
    valueFormat: {
      type: String,
      default: 'yyyy-MM-dd'
    },
    startPlaceholder: {
      type: String,
      default: '开始日期'
    },
    endPlaceholder: {
      type: String,
      default: '结束日期'
    },
    placeholder: {
      type: String,
      default: '选择日期'
    },
    rangeSeparator: {
      type: String,
      default: '-'
    }
  },
  created() {
    this.generateQuarterList()
  },
  data() {
    return {
      visible: false,
      year: new Date().getFullYear(),
      list: [],
      nextList: [],
      currValue: this.value || []
    }
  },
  watch: {
    value(value) {
      if(!value || !value.length) return
      this.currValue = value || []
    }
  },
  created() {
    this.list = this.generateQuarterList()
    this.nextList = this.generateQuarterList(this.year + 1)
  },
  computed: {
    valueText: {
      get() {
        if(this.value && this.value.length) {
          return this.value[0] + ' ' + this.rangeSeparator + ' ' + this.value[1]
        }
      }
    }
  },
  methods: {
    // 根据传入的年份 生成季度列表
    generateQuarterList(year) {
      year = year || new Date().getFullYear()
      let currMonth = new Date().getMonth()
      let currQuarter = Math.floor( ( currMonth % 3 == 0 ? ( currMonth / 3 ) : ( currMonth / 3 + 1 ) ) )
      let list = [{
        name: '一季度',
        startDate: new Date(year + '').Format(this.valueFormat),
        endDate: new Date(new Date(new Date(year + '').setMonth(3)).setDate(0)).Format(this.valueFormat),
        today: new Date().getFullYear() === year && 0 === currQuarter,
        disabled: this.$attrs.pickerOptions && this.$attrs.pickerOptions.disabledDate(new Date(year + ''))
      }, {
        name: '二季度',
        startDate: new Date(new Date(year + '').setMonth(3)).Format(this.valueFormat),
        endDate: new Date(new Date(new Date(year + '').setMonth(6)).setDate(0)).Format(this.valueFormat),
        today: new Date().getFullYear() === year && 1 === currQuarter,
        disabled: this.$attrs.pickerOptions && this.$attrs.pickerOptions.disabledDate(new Date(new Date(year + '').setMonth(3)))
      }, {
        name: '三季度',
        startDate: new Date(new Date(year + '').setMonth(6)).Format(this.valueFormat),
        endDate: new Date(new Date(new Date(year + '').setMonth(9)).setDate(0)).Format(this.valueFormat),
        today: new Date().getFullYear() === year && 2 === currQuarter,
        disabled: this.$attrs.pickerOptions && this.$attrs.pickerOptions.disabledDate(new Date(new Date(year + '').setMonth(6)))
      }, {
        name: '四季度',
        startDate: new Date(new Date(year + '').setMonth(9)).Format(this.valueFormat),
        endDate: new Date(new Date(new Date(year + '').setMonth(12)).setDate(0)).Format(this.valueFormat),
        today: new Date().getFullYear() === year && 3 === currQuarter,
        disabled: this.$attrs.pickerOptions && this.$attrs.pickerOptions.disabledDate(new Date(new Date(year + '').setMonth(9)))
      }]
      return list
    },
    prev() {
      this.year -= 1
      this.list = this.generateQuarterList(this.year)
      this.nextList = this.generateQuarterList(this.year + 1)
    },
    next() {
      this.year += 1
      this.list = this.generateQuarterList(this.year)
      this.nextList = this.generateQuarterList(this.year + 1)
    },
    handleClear() {
      this.__select_value = []
      this.$emit('input', null)
      this.$emit('change', null)
    },
    focusItem(e) {
      if(e.disabled) return
      if(!this.__select_value) {
        this.__select_value = []
      }
      if(this.__select_value.length === 1) {
        let value = e.endDate
        if(value < this.currValue[1]) {
          this.currValue = [e.startDate, this.currValue[1]]
        } else {
          this.currValue = [this.currValue[0], value]
        }
      }
    },
    clickItem(e) {
      if(e.disabled) return
      if(!this.__select_value) {
        this.__select_value = []
      }
      if(this.__select_value.length === 2 || this.__select_value.length === 0) {
        let value = e.startDate
        this.__select_value = [value]
        this.currValue = [value, value]
      } else {
        let value = e.endDate
        this.__select_value.push(value)
        if(value < this.currValue[1]) {
          this.currValue = [e.startDate, this.currValue[1]]
        } else {
          this.currValue = [this.currValue[0], value]
        }
        this.$emit('input', this.currValue)
        this.$emit('change', this.currValue)
        this.visible = false
      }
    }
  }
}
</script>